<template>
  <div style="height:100%">
    <div class="page-body" v-loading="loading">
      <div class="page-header">
        <el-input placeholder="请输入区域名称查询" class="page-header-query" v-model="searchValue" style="width:100%;"
          @input="onQueryChanged">
          <!-- <template #append>
            <el-button :icon="Search" @click="onSearch"></el-button>
          </template> -->
        </el-input>
      </div>
      <div class="page-con" ref="pageCon">
        <el-tree-v2 :height="treeHeight" ref="tree" :data="tableList" :props="treeProps" draggable
          :expand-on-click-node="false" node-key="Id" :highlight-current="highlightCurrent" check-strictly
          :filter-method="filterMethod">
          <template #default="{ node, data }">
            <div class="custom-tree-node"
              :class="{ 'custom-tree-node-select': data.Id == selectRowId && highlightCurrent }"
              @click="selectRow(data)">
              {{ data.Name }}
              <el-button type="text" size="small" style="margin-left: 10px;">选择
              </el-button>
            </div>
          </template>
        </el-tree-v2>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
/**
 * 唐万尊
 */
export default defineComponent({
  name: "orgComp",
})
</script>

<script lang="ts" setup>
import { ref, nextTick, onMounted, onBeforeUnmount, onActivated, onDeactivated } from "vue";
import { RegionOrgDataClass } from "@/views/apphome/RegionOrg/config";
import regionOrgData from "@/store/globalData/regionOrgData";


let props = withDefaults(defineProps<{
  /**
   * 是否高亮当前选择节点
   */
  highlightCurrent?: boolean,
  /**
   * 是否自适应高度
   */
  autoResizeHeight?: boolean,
}>(), {
  highlightCurrent: false,
  autoResizeHeight: false
})

let emit = defineEmits<{
  (e: "selectRow", value: RegionOrgDataClass): void;
}>()

let treeProps = ref({
  value: 'Id',
  label: 'Name',
  children: '_children',
})

/**
 * tree结构数据
 */
let tableList = ref<RegionOrgDataClass[]>([]);

/**
 * 承载树状的容器
 */
let pageCon = ref<HTMLElement | null>(null);

/**
 * 树的高度
 */
let treeHeight = ref<number>(0);

/**
 * 当前页数
 */
let currentPage = ref(1);
/**
 * 搜索内容
 */
let searchValue = ref<any>(null)

/**
 * 加载数据
 */
let loading = ref(false);

/**
 * 定义tree组件
 */
let tree = ref();

/**
 * 被选中的row id
 */
let selectRowId = ref(0);


/**
 * 获取列表
 */
function getData() {
  loading.value = true;
  regionOrgData.getData()
    .then((res: RegionOrgDataClass[]) => {
      tableList.value = res;
    })
    .finally(() => {
      loading.value = false;
    });
}

/**
 * 点击选择某一项的时候
 */
function selectRow(row: RegionOrgDataClass) {
  selectRowId.value = row.Id;
  emit("selectRow", row);
}

/**
 * 快速筛选
 */
function onQueryChanged(query: string) {
  tree.value!.filter(query)
}

/**
 * 筛选
 */
function filterMethod(query: string, node: any) {
  return node.Name.includes(query)
}

/**
 * ====================
 *  自适应更改系统
 * ====================
 */

/**
 * 组件是否为被激活状态
 */
let isActiva: boolean = true;

onMounted(() => {
  resetHeight();

  if (props.autoResizeHeight) {
    window.addEventListener("resize", resetHeight)
  }
})

onBeforeUnmount(() => {
  if (props.autoResizeHeight) {
    window.removeEventListener("resize", resetHeight)
  }
})

//被激活
onActivated(() => {
  isActiva = true;
  if (props.autoResizeHeight) {
    winReset();
  }
})

// 失活
onDeactivated(() => {
  isActiva = false;
})

/**
 * 自适应高度
 */
function resetHeight() {
  if (pageCon.value && isActiva) {
    treeHeight.value = pageCon.value.offsetHeight;
  }
}

/**
 * 页面刷新
 */
function winReset() {
  if (pageCon.value && treeHeight.value == pageCon.value.offsetHeight) {
    //表示页面没有发生缩放
    treeHeight.value++;
    nextTick(() => {
      treeHeight.value--;
    })
  } else {
    resetHeight();
  }
}

defineExpose({
  winReset
})

/**
 * ====================
 *  页面初始化
 * ====================
 */
getData();

</script>

<style lang="less" scoped>
.page-body {
  height: 100%;
  width: 100%;

  // .el-tree {
  //   height: 100%;
  // }

  // /deep/ .el-tree-node {
  //   height: 30px;
  // }

  // /deep/ .el-tree-node__content {
  //   height: auto;
  // }
}

@borderColor: rgb(221, 221, 221);

.page-header {
  padding: 5px 0;
  height: 40px;
}

.page-con {
  height: calc(100% - 40px);
}

.page-th {
  width: 100%;
  display: flex;
  font-size: 13px;
  height: 38px;
  font-weight: bold;
  border-bottom: 1px solid @borderColor;
  border-left: 1px solid @borderColor;
  background-color: #f5f5f5;
}

.custom-tree-node {
  width: 100%;
  overflow: auto;

  &::-webkit-scrollbar {
    height: 5px;
    background: white;
  }
}

.custom-tree-node-select {
  color: var(--primaryColor);
  font-weight: bold;
}
</style>
